import { useState } from 'react';
import { Select, Button, Input, Modal, message } from 'antd';
const { Option } = Select;
import bridgeSide from '@assets/images/bridge-side.png';
import bridgeIcHalo from '@assets/images/bridge-ic-halo.png';
import bridgeMask from '@assets/images/bridge-mask.png';
import bridgeSelect from '@assets/images/bridge-select.png';
import './index.less';
function Bridge() {
    const [isModalVisible, useIsModalVisible] = useState(false);
    const [connectStatus, useConnectStatus] = useState(false);

    let nick = '0X121xxxx11111';
    nick = nick.slice(0, 5) + '...' + nick.slice(-5);

    const openModal = () => {
        useIsModalVisible(true);
    };

    return (
        <div className="halo-bridge">
            <div className="bridge-con">
                <div className="bridge-top">
                    <div className="top-title">HALO Bridge</div>
                    <div className="top-text">
                        The safe, fast and most secure way to convert the digital assets to HALO
                        chains.
                    </div>
                </div>
                <div className="bridge-cen">
                    <div className="cen-left">
                        <div className="cen-left-box1">Halo Bridge was issued assets</div>
                        <div className="cen-left-box">
                            <div className="box-title">Token</div>
                            <div className="box-con">HRC-ETH</div>
                        </div>
                        <div className="cen-left-box">
                            <div className="box-title">Amount</div>
                            <div className="box-con">10000000</div>
                        </div>
                        <img className="bridge-side" src={bridgeSide}></img>
                    </div>
                    <div className="cen-right">
                        <div className="right-form">
                            <div className="form-hd">Asset</div>
                            <Select className="right-sel" defaultValue="lucy">
                                <Option value="jack">Jack</Option>
                                <Option value="lucy">Lucy</Option>
                                <Option value="disabled" disabled>
                                    Disabled
                                </Option>
                                <Option value="Yiminghe">yiminghe</Option>
                            </Select>
                        </div>
                        <div className="right-form-wrap">
                            <div className="right-form">
                                <div className="form-hd">From</div>
                                <div className="form-box">
                                    <div className="form-box-tp">
                                        <img className="form-box-icon" src={bridgeMask}></img>
                                        <div className="form-box-text">{nick}</div>
                                        <img
                                            className="form-box-sel"
                                            src={bridgeSelect}
                                            onClick={openModal}
                                        ></img>
                                    </div>
                                    <div>
                                        <Button
                                            type="primary"
                                            className="btn-l form-btn"
                                            onClick={() => {
                                                message.open({
                                                    content: 'Connected',
                                                    className: 'custom-class',
                                                    style: {
                                                        marginTop: '20vh'
                                                    }
                                                });
                                            }}
                                        >
                                            CONNECT WALLET
                                        </Button>
                                    </div>
                                </div>
                            </div>
                            <div className="right-form">
                                <div className="form-hd">To</div>
                                <div className="form-box">
                                    <div className="form-box-tp">
                                        <img className="form-box-icon" src={bridgeIcHalo}></img>
                                        <div className="form-box-text">HALO Network</div>
                                    </div>
                                    <div className="form-box-bt">
                                        <Input
                                            className="bt-inp"
                                            placeholder="Enter HALO Wallet address"
                                        ></Input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="right-form">
                            <div className="form-hd">Amount</div>
                            <Input className="right-inp" />
                        </div>
                        <Button type="primary" className="btn con-btn">
                            CONVERT
                        </Button>
                        <div className="right-bt">
                            <div className="right-bt-text">
                                Conversion completed time: The cross-chain transfer will be
                                completed within 5 minutes.
                            </div>
                            <div>
                                The Halo Bridge V1 version supports the conversion of ETH to HRX-ETH
                                only. The V2 version will be launch after Genesis Event. The V2
                                version will support more digital assets and the conversion with
                                different chains.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Modal
                className="from-modal"
                title=""
                visible={isModalVisible}
                footer={''}
                closable={false}
            >
                <Select className="right-sel" defaultValue="lucy">
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="disabled" disabled>
                        Disabled
                    </Option>
                    <Option value="Yiminghe">yiminghe</Option>
                </Select>
                <Input className="right-inp" />
                <div className="modal-bt">
                    <a
                        className="btn-m-w"
                        onClick={() => {
                            useIsModalVisible(false);
                        }}
                    >
                        CANCEL
                    </a>
                    <Button
                        type="primary"
                        className="btn-m"
                        onClick={() => {
                            useIsModalVisible(false);
                        }}
                    >
                        CONNECT WALLET
                    </Button>
                </div>
            </Modal>
        </div>
    );
}

export default Bridge;
